<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello WebSocket</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/layer/layer.js"></script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div id="main-content" class="container">
    <h1>jvm进程内的日志</h1>
    <div class="row">
        <button onclick="openSocket()">开启日志</button>
        <button onclick="closeSocket()">关闭日志</button>
    </div>
    <div id="log-container" style="height: 300px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
        <div></div>
    </div>
</div>
</body>
<script>
    var stompClient = null;
    $(document).ready(openSocket());

    /**
     * 创建连接
     */
    function openSocket() {
        if (stompClient == null) {
            var scoket = new SockJS('http://localhost:8080/logger?token=kl');
            stompClient = Stomp.over(scoket)
            stompClient.connect({token: "kl"}, function (iframe) {
                console.log(iframe);
                stompClient.subscribe('/topic/pullLogger', function (event) {
                    var content = JSON.parse(event.body);
                    $("#log-container div").append(content.timestamp + " " + content.level + " --- [" + content.threadName + "] " + content.className + "   :" + content.body).append("<br/>");
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                }, {
                    token: "kltoen"
                })
            })
        }
    }

    /**
     * 关闭连接
     */
    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient = null;
        }
    }
</script>
</html>
